<template>
  <div class="fund-container">
    <div class="content-wrapper">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
        <el-form-item label="选择油站" props="gasId">
          <el-select class="select" v-model="ruleForm.gasId" size="mini" @change="handleSelect">
            <el-option v-for="item in gasOptions" :key="item.gasId" :value="item.gasId" :label="item.gasName"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="操作类型" prop="operateType">
            <el-select class="select" v-model="ruleForm.operateType" size="mini">
              <el-option v-for="item in operateOptions" :key="item.code" :value="item.code" :label="item.desc"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作日期" prop="valueTime">
            <el-date-picker
              size="mini"
              v-model="ruleForm.valueTime"
              type="daterange"
              value-format="yyyy-MM-dd" 
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button class="search-btn" size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div class="fund-wrap">
        <div class="fund-sum-wrap">
          <img class="fund-icon" src="https://web.newlink.com/ty/merchant/market/icon-market-money.png" alt="">
          <div class="fund-title">营销基金总余额：</div>
          <div class="fund-money"><span class="unit">¥</span> {{fundMoneyTwo}}</div>
        </div>
        <div class="fund-freeze-wrap" :class="{ani: showAni}">
          <img class="fund-icon" src="https://web.newlink.com/ty/merchant/market/icon-fund.png" alt="">
          <div class="fund-title">基金冻结余额：</div>
          <div class="fund-money"><span class="unit">¥</span> {{frostBalanceTwo}}</div>
        </div>
      </div>
      <el-card class="card" shadow="never" :body-style="{ padding: '0'}">
        <el-table
          :header-cell-style="{ background: '#F5F7FA' }"
          v-loading="loading" 
          size="small" 
          :data="dataList" 
          stripe
          style="width: 100%"
          >
          <el-table-column prop="gasName" label="油站名称" width="180" align="center"></el-table-column>
          <el-table-column prop="createDt" label="操作时间" width="180" align="center"></el-table-column>
          <el-table-column prop="operateTypeName" label="操作类型" width="180" align="center"></el-table-column>
          <el-table-column prop="totalAmount" label="基金收支"  width="180" align="center">
            <template slot-scope="scope">  
              <span v-if="[30, 40, 60].includes(scope.row.operateType)">-</span>
              <span v-if="[20, 70, 10].includes(scope.row.operateType)">+</span>
              <span>{{scope.row.totalAmount}}</span>
            </template>  
          </el-table-column>
          <el-table-column prop="subBalanceAmount" label="基金冻结余额" width="180" align="center"></el-table-column>
          <el-table-column prop="totalBalanceAmount" label="基金总余额" width="180" align="center"></el-table-column>
          <el-table-column min-width="160px" prop="remark" label="备注" align="center"></el-table-column>
        </el-table>
      </el-card>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageOptions.pageIndex"
          :page-sizes="pageSizes"
          :page-size="pageOptions.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllGasInfoList } from '@/api/gasStationManage/gasInfo'
import { getMaketFundList, getMaketFund, getOperatorTypeEnums, maxNoticeAmount } from '@/api/marketFund'
export default {
  data () {
    return {
      maxFund: 0,
      showAni: false, // 展示动画
      operateOptions:[],
      ruleForm:{
        gasId: '',
        operateType: '',
        valueTime: []
      },
      id: '',
      fundMoney: '',
      frostBalance: '',
      dataList: [],
      pageSizes: [20],
      loading: false,
      gasOptions: [],
      pageOptions: {
        pageIndex: 1,
        pageSize: 20
      },
      allTotal: 0
    }
  },
  mounted () {
    const { gasId } = this.$route.query
    this.initGasNameSelect(gasId)
    this.searchMaketFund(gasId)
    this.getOperatorTypeEnums()
  },
  computed: {
    fundMoneyTwo () {
      const { fundMoney } = this
      return !fundMoney && fundMoney !== 0 ? '0.00' : fundMoney.toFixed(2)
    },
    frostBalanceTwo () {
      const { frostBalance } = this
      return !frostBalance && frostBalance !== 0 ? '0.00' : frostBalance.toFixed(2)
    }
  },
  watch: {
    '$route' (e) {
      const { gasId } = e.query
      this.searchMaketFund(gasId)
    }
  },
  methods: {
    // 查询接口
    search () {
      this.getMaketFundList()
      this.getMaketFund()
    },
    // 重置接口
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.initGasNameSelect()
    },
    handleSizeChange (val) { // 分页改变时
      console.log(val)
    },
    handleCurrentChange (val) { // 翻页
      this.pageOptions.pageIndex = val
      if (!this.id) return
      this.getMaketFundList()
    },
    // 获取所有油站名称
    async initGasNameSelect (gasId) {
      try {
        const { code, result } = await getAllGasInfoList()
        if (code !== 200) return
        if (result) {
          this.gasOptions = result.map(item => ({ gasName: item.gasName, gasId: item.gasId }))
          if (this.gasOptions.length && !gasId) {
            this.searchMaketFund(this.gasOptions[0].gasId)
          }
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取营销基金
    async getMaketFund () {
      const params = {
        gasId: this.ruleForm.gasId
      }
      try {
        const res = await getMaketFund(params)
        const { code, result = {} } = res
        if (code !== 200) return
        if (!result) {
          this.initData()
          return
        }
        this.fundMoney = result?.totalBalance
        this.frostBalance = result?.frostBalance
        this.id = result?.id
        this.queryAniType()
        this.getMaketFundList()
      } catch (error) {
        console.log(error.message)
      }
    },
    // 获取营销基金列表
    async getMaketFundList () {
      const params = {
        id: this.id,
        ...this.ruleForm,
        ...this.pageOptions
      }
      params.startTime = params.valueTime.length > 0 ? params.valueTime[0] : null
      params.endTime = params.valueTime.length > 0 ? params.valueTime[1] : null
      delete params.valueTime
      delete params.gasId
      try {
        const { code, result = [], totalRow = 0  } = await getMaketFundList(params)
        if (code !== 200) return
        this.dataList = result
        this.allTotal = totalRow
      } catch (error) {
        console.log(error.message)
      }
    },
    async getOperatorTypeEnums () {
      try {
        const { code, result } = await getOperatorTypeEnums()
        if (code !== 200) return
        this.operateOptions = result
      } catch (e) {
        console.log(e)
      }
    },
    // 选择油站
    handleSelect (e) {
      this.initData()
      this.searchMaketFund(e)
    },
    // 初始化设置
    initData () {
      this.allTotal = 0
      this.fundMoney = 0
      this.frostBalance = 0
      this.id = ''
      this.dataList = []
      this.pageOptions.pageIndex = 1
    },
    // 查询展示冻结金额动画效果(查询阈值)
    async queryAniType () {
      try {
        const { code, result } = await maxNoticeAmount()
        if (code !== 200) return
        this.maxFund = result
        if (this.frostBalance <= result) { // 如果冻结金额小于阈值,就展示动画效果
          this.showAni = true
          setTimeout(() => {
            this.showAni = false
          }, 10000)
        }
      } catch (error) {
        console.log(error.message)
      }
    },
    // 查询详情通用逻辑
    searchMaketFund (e) {
      if (!e) return
      this.ruleForm.gasId = e
      this.getMaketFund()
    }
  }
}
</script>

<style scoped lang="less">
.center{
  display: flex;
  align-items: center;
}
.fund-container{
  width: 100%;
  height: 100%;
  background: rgba(248,249,253,1);
  padding: 10px 10px 0 10px;
  .content-wrapper{
    background-color: #fff;
    padding: 16px 17px 15px 11px;
  }
  .select{
    margin-bottom: 13px;
  }
  .fund-wrap{
    .center();
    margin-bottom: 15px;
    .fund-sum-wrap{
      .center();
    }
    .fund-freeze-wrap{
      .center();
      &.ani{
        animation: change-size 2s linear 0s infinite alternate;
      }
    }
    .fund-icon{
      width: 25px;
      height: 25px;
      margin-left: 20px;
      vertical-align: middle;
      margin-right: 7px;
    }
    .fund-title{  
      font-size: 13px;
      margin-left: 10px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .fund-money{
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FB2B2B;
      .unit{
        font-size: 16px;
      }
    }
  }
}
.btn{
  display: flex;
  justify-content: flex-end;
}
/deep/.el-icon-arrow-up:before{
    content: "\e790";
    font-size: 14px;
}
/deep/.el-form-item{
  margin-bottom: 0;
}
.block{
  margin: 20px 10px;
  text-align: center;
}
.card{
  margin-top: 22px;
  border: 1px solid #EBEEF5; 
  border-bottom: none;
}
.search-btn{
  background-color: #4B7EFE;
  border: none;
}
@keyframes change-size {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.02);
  }
  20% {
    transform: scale(1.04);
  }
  30% {
    transform: scale(1.06);
  }
  40% {
    transform: scale(1.08);
  }
  50% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1.08);
  }
  70% {
    transform: scale(1.06);
  }
  80% {
    transform: scale(1.04);
  }
  90% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

</style>